<template>
  <div class="home">
    <div class="homeTop">
      <div class="topCenter flex-md">
        <div class="centerTitle flex-sbc">
          <div class="left">
            <div style="color: #FF0101;margin-right: 15px" v-if="username == ''">亲，请登录</div>
            <div style="color: #FF0101;margin-right: 15px" v-else>
              <el-dropdown @command="commandClick">
               <span class="el-dropdown-link">
                  {{ username }}<i class="el-icon-arrow-down el-icon--right"></i>
               </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="1">后台管理</el-dropdown-item>
                  <el-dropdown-item divided command="loginout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
            <div>小程序节鱼</div>
          </div>
          <div class="right">
            <div style="margin-right: 15px">
              <el-dropdown @command="commandClick">
               <span class="el-dropdown-link">
                  我的商品<i class="el-icon-arrow-down el-icon--right"></i>
               </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="2">已买的商品</el-dropdown-item>
                  <el-dropdown-item command="3">出售的商品</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
            <div style="margin-right: 15px" @click="collectClick">
              <i class="el-icon-shopping-cart-2" style="color: red"></i>
              购物车
            </div>
            <div style="margin-right: 15px">联系客服</div>
          </div>
        </div>
      </div>
    </div>

    <div class="HomeTab">
      <el-row :gutter="25" class="flex-md" style="margin: 15px 0">
        <el-col :offset="3" :span="4">
          <img src="@/assets/img/logo.png" style="width: 240px;height: 120px">
        </el-col>
        <el-col :span="10">
          <div style="margin-top: 13px">
            <el-input placeholder="请输入搜索内容" v-model="queryInfo.query" clearable>
              <el-button slot="append" icon="el-icon-search" @click="getShopType()"></el-button>
            </el-input>
          </div>
          <div class="tabCom" style="margin:10px;">
            <div class="tabSin">
              <el-button type="text" :class="tabIdClick == 0 ? 'tabSinClick':''" @click="tabClick(0,0)">全部</el-button>
            </div>
            <div class="tabSin" v-for="(item,index) in tabList"
                 :key="index" v-if="index<8">
              <el-button type="text" :class="tabIdClick == index+1 ? 'tabSinClick':''" @click="tabClick(index+1,item.id)">
                {{ item.title }}
              </el-button>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="">
      <shop :flowList="shopList" v-on:shopIdClick="shopIdClick"></shop>
    </div>
  </div>
</template>

<script>
import Shop from '@/components/Shop';
import ShopXQ from '@/views/front/ShopXQ';
export default {
  components:{
    Shop
  },
  name: 'Home',
  data() {
    return {
      username: '',
      queryInfo: {
        query: '',
        shopType: 0,
      },
      tabList: [],
      tabIdClick: 0,

      shopList: []
    };
  },
  created() {
    this.getUser();
    this.getTabList();

  },
  methods: {
    getUser() {
      let user = JSON.parse(window.sessionStorage.getItem('user') || null);
      if (user) {
        this.username = user.username;
      }
    },
    commandClick(cmditem) {
      if (!cmditem) {
        this.$message('菜单选项缺少command属性');
        return;
      }
      switch (cmditem) {
        case '1':
          this.$router.push('../admin/Admin');
          break;
        case '2':
          this.$router.push('../front/Yiship');
          break;
        case '3':
          this.$router.push('../front/ChuShip');
          break;
        case 'loginout':
          // localStorage.removeItem("ms_username");
          window.sessionStorage.clear();//清除session
          this.$router.push('/login');
          break;
      }
    },
    async getTabList() {
      const { data: res } = await this.$http.get('tab', { params: this.queryInfo });
      if (res.flag == '200') {
        this.tabList = res.tab;  //用户列表数据
        this.getShopType()
      }
    },
    tabClick(index,id) {
      let that = this;
      that.tabIdClick = index;
      that.queryInfo.shopType = id
      this.getShopType()
    },
    async getShopType() {
      // let that = this
      // console.log(this.queryInfo)
      const { data: res } = await this.$http.get('shop/getShopType', { params: this.queryInfo });
      if (res.flag == '200') {
        let serve = res.shopList
        this.shopList = []
        serve.forEach((item,index) => {
          if(item.shopUrl.indexOf("<<tupian>>") > 0){
            item.shopUrl = item.shopUrl.split("<<tupian>>")[0]
            // console.log(index)
          }
          // console.log(item.shopUrl)
          this.shopList.push(item)
        })
      }
    },
    shopIdClick:function(index){
      this.$router.push({
        // path: `/front/ShopXQ/${index}`,
        name: 'ShopXQ',
        params:{
          id: index
        }
      })
    },
    collectClick(){
      this.$router.push("../front/Collect")
    }
  },
  watch:{
    tabIdClick:function(){
      // this.getShopType()
    }
  }
};
</script>

<style lang="less" scoped>
.home {
  .homeTop {
    z-index: 10000;
    width: 100%;
    background: #F5F5F5;
    border-bottom: 1px solid #EEE;

    .topCenter {
      margin: 0 auto;
      width: 990px;
      height: 35px;
      background: #F5F5F5;
      -webkit-backface-visibility: hidden;

      .centerTitle {
        width: 75%;
        color:#999;
        font-size: 14px;

        .left {
          display: flex;
        }

        .right {
          display: flex;
        }
      }
    }
  }

  .HomeTab {
    .tabCom {
      display: flex;
      align-items: center;

      .tabSin {
        margin: 0 15px;
        color: #9b9b9b;
      }

      .tabSinClick {
        color: #fd3f31
      }
    }
  }
}
</style>
